//引入重置样式
require("../css/commCss/normalize.css");
//引入重置扩展样式
require("../css/commCss/reset.css");
//引入公共样式
require("../css/commCss/property.css");
//引入公共扩展样式
require("../css/commCss/basic.css");

//引入字体图标样式
require("../lib/font_3139541_zokbtoztf/iconfont.css");

//引入当前页面样式
require("../css/play.less");

//引入axios
const axios = require("axios");

//导入util
const util = require("../lib/util");

//导入weui
require("weui");
const weui = require("weui.js");

//文档加载事件
document.addEventListener("DOMContentLoaded", function () {

    /* 
    0:获取元素
    */
    let videoUrl = document.querySelector('#videoUrl')//获取视频
    let curNum = document.querySelector('#curNum')//获取当前节数
    let totalNum = document.querySelector('#totalNum')//获取总节数
    let title = document.querySelectorAll('.title')//获取视频标题
    let prev = document.querySelector('#prev')//获取上一节
    let pause = document.querySelector('#pause')//获取暂停
    let next = document.querySelector('#next')//获取下一节
    let videoModal = document.querySelector('#videoModal')//获取模态框
    let imgUrl = document.querySelector('#imgUrl')//获取图片
    let goOn = document.querySelector('#goOn')//获取模态框
    let end = document.querySelector('#end')//获取图片

    let progress = document.querySelector('#progress')//获取进度条


    /* 
    1:从会话存储获取数据,注:获取到的数据是字符串,要转对象
    */
    let fragments = JSON.parse(sessionStorage.fragments)
    console.log(fragments);

    //2.4定义标量保存当前视频的索引(注:在外面定义当前视频的索引,全局变量,之后的调用都可使用)
    let index = 0

    //2.5渲染总节数(注:总节数是进入页面从会话存储拿到数据就知道总节数,所以放在外面渲染一次就可以,放在里面不同视频就会又渲染一次总节数,就增加了服务器压力)(总节数就是fragments视频,他是一个数组,它的总节数就是它的长度)
    let maxNum = fragments.length
    totalNum.textContent = maxNum

    /* 
    2:渲染数据,封装成函数,方便多次调用
    */
    renderData()
    function renderData() {

        //2.1渲染视频(注:视频在传入时要添加布尔属性:muted,autoplay,可以写在行内样式,也可以写js代码,如autoplay=true)
        videoUrl.src = 'http://139.9.177.51:8099' + fragments[index].videoUrl;

        //2.2渲染标题title
        title[0].textContent = fragments[index].title//渲染当前页面的标题
        title[1].textContent = fragments[index].title//渲染模态框里面的标题

        //2.3渲染当前视频节
        curNum.textContent = index + 1

        //2.4渲染图片
        imgUrl.src = 'http://139.9.177.51:8099' + fragments[index].imgUrl

    }

    /* 
    3:上一节:点击上一节,调用一次上面封装好的渲染函数
    */
    prev.addEventListener('click', function () {
        index--
        if (index == -1) {
            index = maxNum - 1
        }
        renderData()
    })

    /* 
    4:下一节:点击下一节,调用一次上面封装好的渲染函数
    */
    next.addEventListener('click', function () {
        index++
        if (index == maxNum) {
            index = 0
        }
        renderData()
    })

    /* 
    5:点击暂停,暂停视频播放,同时显示模态框
    */
    pause.addEventListener('click', function () {

        //5.1暂停视频播放
        videoUrl.pause()

        //5.2显示模态框
        videoModal.style.display = 'block';

        //10.3暂停时清除计时器
        clearInterval(timeId)
    })

    /* 
    6:点击继续,播放视频
    */
    goOn.addEventListener('click', function () {

        //播放视频
        videoUrl.play()

        //隐藏模态框
        videoModal.style.display = "none"

        //10.4点击继续,继续记录时间
        getTrainTime()
    })

    /* 
    8:进度条:是使用播放时触发事件
    进度条宽度/(100)=视频当前播放时长/视频总时长,按百分比来进行计算,就不需要再去获取进度条的外层进度条总宽度,但是以及在赋给进度条的宽度的时候就要用%,而不是'px'
    */
    //8.1播放时内触发
    videoUrl.addEventListener('timeupdate', function () {

        //视频当前播放时长
        let currentTime = videoUrl.currentTime

        //视频总时长
        let duration = videoUrl.duration

        // console.log(currentTime, duration);

        //进度条宽度
        let progressWidth = currentTime * 100 / duration

        //设置进度条的宽度
        progress.style.width = progressWidth + "%"
        // console.log(progressWidth);
    })

    /* 
    9:播放完一个视频继续播放下一个视频
    */
    videoUrl.addEventListener('ended', function () {

        //weui提示
        weui.toast('即将进入下一个页面哦~')

        //设置一个超时调用,用js去触发下一节播放
        setTimeout(function () {
            next.click()
        }, 3000)
    })

    /* 
    10:记录训练时间:因为在运动之后会有看视频的时间,但是只是在播放视频的时候才会记录,页面暂停视频没有播放的时候,就不记录
    */
    //10.2定义全局变量
    let timeId = null//定义定时器id
    let time = 0//定义记录起始时间
    //10.1
    getTrainTime()
    function getTrainTime() {
        timeId = setInterval(function () {
            time++
            // console.log(time);
        }, 1000)

    }

    /* 
    7__最后一步:点击结束,保存课程的训练数据,返回确定参数是否正确,正确发送请求
    */
    end.addEventListener('click', function () {

        //7.1定义参数
        let params = {
            id: sessionStorage.cid,//id是课程id,是存在会话存储里的
            userId: localStorage.userId,//用户id,
            takeTime: time,//这里的time就是我们自己定义的记录时间
            calorie: time * 0.5,
        }
        console.log(params);

        //7.2发送请求
        axios.post('http://139.9.177.51:8099/sports/saveTrain', params).then(function (res) {
            console.log(res.data);
            if (res.data.status == 0) {//成功
                weui.toast(`消耗了${params.calorie}卡路里`, {
                    callback: function () {
                        location.href = 'Trainingcourse.html'
                    }
                })
            } else {//失败
                weui.alert('继续加油哦~')
            }
        })
    })


})